<template>
  <div class="dict-dialog-container-warp">
    <XDialog :title="state.title" :size="isMobile ? '90vw' : '40vw'" :visible.sync="open" v-model="open" width="40%" :before-close="handleClose">
      <el-form :model="state.itemRecord" ref="formRef" :rules="rules" label-width="100px" :inline="true">
        <el-row :gutter="20">
          <el-col>
            <el-form-item label="父级字典：" prop="pid">
              <el-select style="width: 80%" v-model="state.itemRecord.pid" placeholder="请选择父级字典" clearable>
                <el-option v-for="item in state.dictParentList" :key="item.id" :label="item.label" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col>
            <el-form-item label="字典名称：" prop="label">
              <el-input style="width: 80%" clearable v-model="state.itemRecord.label"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="state.itemRecord.pid == 0">
          <el-col>
            <el-form-item label="字典标识：" prop="dictType">
              <el-input style="width: 80%" clearable v-model="state.itemRecord.dictType"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20" v-if="state.itemRecord.pid != 0">
          <el-col>
            <el-form-item label="字典值：" prop="value">
              <el-input style="width: 80%" clearable v-model="state.itemRecord.value"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20" v-if="state.user.role_key == 'admin' || state.user.role_key == 'visitor'">
          <el-col>
            <el-form-item label="所属角色" prop="role_key">
              <el-select style="width: 80%" v-model="state.itemRecord.role_key" placeholder="请选择所属角色" clearable>
                <el-option v-for="item in state.roleList" :key="item.role_key" :label="item.role_name" :value="item.role_key"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col>
            <el-form-item label="排序：" prop="sort">
              <el-input style="width: 80%" v-model="state.itemRecord.sort"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col>
            <el-form-item label="备注：">
              <el-input style="width: 80%" clearable type="textarea" :min="2" v-model="state.itemRecord.remark"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <template #footer>
        <span>
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确认</el-button>
        </span>
      </template>
    </XDialog>
  </div>
</template>

<script lang="ts" setup>
import { addDict, getDict, updateDict } from '@/api/system/dict';
import { getRoleList } from '@/api/system/role';
import { ElMessage, ElMessageBox } from 'element-plus';
import { reactive, ref } from 'vue';
import { useAppStore } from '@/store/common';

const props = defineProps({
  isMobile: Boolean,
  refreshCallBack: Function
});

let formRef = ref(null);
let open = ref(false);
const state = reactive({
  title: '新增',
  type: 'add',
  itemRecord: {
    pid: 0,
    id: '',
    dictType: '',
    label: '',
    value: '',
    sort: 0,
    role_key: '',
    role_str: '',
    remark: ''
  },
  dictList: [],
  roleList: [],
  dictParentList: [],
  user: useAppStore().user
});

const rules = {
  pid: [{ required: true, message: '请输入父级字典', trigger: 'blur' }],
  dictType: [{ required: true, message: '请输入字典标识', trigger: 'blur' }],
  label: [{ required: true, message: '请输入字典名称', trigger: 'blur' }],
  value: [{ required: true, message: '请输入字典值', trigger: 'blur' }]
};

// 关闭弹窗
const handleClose = () => {
  state.itemRecord = {
    pid: 0,
    id: '',
    dictType: '',
    label: '',
    value: '',
    role_key: '',
    role_str: '',
    sort: 0,
    remark: ''
  };
  open.value = false;
};

// 新增
const add = () => {
  if (state.itemRecord.role_key) {
    let row = state.roleList.find(item => item.role_key == state.itemRecord.role_key);
    if (row) state.itemRecord.role_str = row.role_name;
  }
  addDict(state.itemRecord).then(res => {
    ElMessage.success('新增成功');
    handleClose();
    props.refreshCallBack && props.refreshCallBack();
  });
};

// 获取角色列表
const getRoleListFn = () => {
  getRoleList().then(res => {
    if (res.code == 200) {
      state.roleList = res.data;
    }
  });
};

// 修改
const edit = () => {
  if (state.itemRecord.role_key) {
    let row = state.roleList.find(item => item.role_key == state.itemRecord.role_key);
    if (row) state.itemRecord.role_str = row.role_name;
  }
  updateDict(state.itemRecord).then(res => {
    ElMessage.success('修改成功');
    handleClose();
    props.refreshCallBack && props.refreshCallBack();
  });
};

// 提交
const handleSubmit = () => {
  let tipText = state.type === 'add' ? '确认新增嘛？' : '确认修改嘛？';
  (formRef.value as any).validate((valid: any) => {
    if (valid) {
      ElMessageBox.confirm(tipText, '提示').then(() => {
        state.type === 'add' ? add() : edit();
      });
    }
  });
};

// 获取父级字典列表
const getDictParentList = () => {
  getDict().then(res => {
    if (res.code == 200) {
      state.dictParentList = [{ label: '顶级字典', id: 0 }, ...res.data];
    }
  });
};

// 打开弹窗
const showDialog = (type: string, row) => {
  row = JSON.parse(JSON.stringify(row));
  if (type == 'add') {
    if (row) {
      state.itemRecord = {
        pid: row.id,
        dictType: row.dictType,
        sort: 0
      };
    }
  } else {
    state.itemRecord = row;
  }
  state.title = type == 'add' ? '新增' : '修改';
  state.type = type;
  getDictParentList();
  getRoleListFn();
  open.value = true;
};

defineExpose({
  open,
  showDialog
});
</script>

<style lang="scss" scoped>
.dict-dialog-container-warp {
  // width: 100%;
  // height: 100%;
  .el-form {
    // padding: 20px 0;
  }
  .el-form-item {
    width: 100%;
  }
}
</style>
